<template>
  
  <Tabs :tabs="tabs" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Tabs from '../components/Tabs.vue';
import ExampleZephyrTan from '../components/ExampleZephyrTan.vue';
import ExampleKlausSchaefers from '../components/ExampleKlausSchaefers.vue';
import ExampleDiboSoftware from '../components/ExampleDiboSoftware.vue';
import ExampleJzfai from '../components/ExampleJzfai.vue';
import ExampleCorteza from '../components/ExampleCorteza.vue';
import ExampleCowCoder from '../components/ExampleCowCoder.vue';
import ExampleJaffenW from '../components/ExampleJaffenW.vue';
import ExampleUyoufu from '../components/ExampleUyoufu.vue';
import ExampleTearsillusion from '../components/ExampleTearsillusion.vue';
import ExampleSupermaticUI from '../components/ExampleSupermaticUI.vue';


const tabs = [
  { name: 'ZephyrTan', component: ExampleZephyrTan },
  { name: 'KlausSchaefers', component: ExampleKlausSchaefers },
  { name: 'DiboSoftware', component: ExampleDiboSoftware },
  { name: 'Jzfai', component: ExampleJzfai },
  { name: 'Corteza', component: ExampleCorteza },
  { name: 'CowCoder', component: ExampleCowCoder },
  { name: 'JaffenW', component: ExampleJaffenW },
  { name: 'Uyoufu', component: ExampleUyoufu },
  { name: 'Tearsillusion', component: ExampleTearsillusion },
  { name: 'SupermaticUI', component: ExampleSupermaticUI },
];
</script>

<style scoped>
.x6-container {
  border: 1px solid #ccc;
  width: 100%;
  height: 600px;
  margin-bottom: 10px;
}

.toolbar {
  display: flex;
  gap: 10px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}
</style>